<template>
    <div id="can1"></div>
  </template>
  
  <script setup>
  import { onMounted, onUnmounted } from "vue";
  import { CanvasRenderer } from "echarts/renderers";
  import { init, use, dispose } from "echarts/core";
  import {
    GridComponent,
    TooltipComponent,
    DatasetComponent,
    TitleComponent,
    DataZoomSliderComponent,
  } from "echarts/components";
  import { LineChart } from "echarts/charts";
  
  let myChart, myCanvas;
  onMounted(() => {
    use([
      CanvasRenderer,
      GridComponent,
      TooltipComponent,
      DatasetComponent,
      TitleComponent,
      DataZoomSliderComponent,
      LineChart,
    ]);
    myCanvas = document.getElementById("can1");
    myChart = init(myCanvas);
    let option = {
      title: {
        text: "区域缩放",
        left: "center",
      },
      dataZoom: [
        {
            width: 20,
            height: 200,
            type: 'slider',
            yAxisIndex: 0,
            left: '90%',
            top: 'center',
            start: 40,
            end: 90
        },
        {
            type: 'slider',
            xAxisIndex: 0,
        }
      ],
      xAxis: {
        type: "category",
      },
      yAxis: {},
      tooltip: {},
      dataset: {
        // 二维数组，其中第一行/列可以给出 维度名，也可以不给出，直接就是数据：
        source: [
          ["product", "2015", "2016", "2017"],
          ["Matcha Latte", 43.3, 85.8, 93.7],
          ["Milk Tea", 83.1, 73.4, 55.1],
          ["Cheese Cocoa", 86.4, 65.2, 82.5],
          ["Walnut Brownie", 72.4, 53.9, 39.1],
        ],
      },
      series: [
        {
          type: "line",
        },
        {
          type: "line",
        },
        {
          type: "line",
        },
      ],
    };
    myChart.setOption(option);
  });
  
  onUnmounted(() => {
    dispose(myChart);
    myChart = null;
  });
  </script>
  
  <style>
  #can1 {
    width: 800px;
    height: 400px;
  }
  </style>
  